import React from 'react';
import { connect } from 'dva';
import moment from 'moment'
import styles from './meet.less';
import meetImg from '@/assets/image/dtimage/meet.png'
import downIcon from '../../assets/image/xl.svg'
import { setDate, timeDiff } from '../../utils/timeProcess.js'

class Meet extends React.Component {

  renderMeet1 = () => {
    const { hiredDate, jobNumber, position } = this.props
    return (
      <div className={styles.bg}>
        <div className={styles.meetBox}>
          <div className={styles.time}><span className={styles.textColor}>{setDate(hiredDate || '')}</span></div>
          <div className={styles.title}>《相遇》</div>
          <div className={styles.text}>你成为了我们第<span className={styles.textColor}>{jobNumber || ''}</span>个澜宝宝</div>
          <div className={styles.text}>不知不觉，已经<span className={styles.textColor}>{timeDiff(hiredDate || '')}</span>天了</div>
        </div>

        <div className={styles.border4}>
          <img className={styles.img} src={meetImg} alt=""></img>
        </div>

        <div className={styles.text3}>
          <div>作为<span className={styles.textColor}>{position || ''}</span>的你，</div>
          <div>在2019年都留下了哪些足迹呢？</div>
        </div>

        <img className={styles.downIcon} src={downIcon} alt='' />
      </div>
    )
  }

  renderMeet2 = () => {
    const { hiredDate, jobNumber, position } = this.props
    return (
      < div className={styles.bg} >
        <div className={styles.meetBox2}>
          <div className={styles.time}>
            <span className={styles.textColor}>{setDate(hiredDate || '')}</span>
          </div>
          <div className={styles.title}>《相遇》</div>
          <div className={styles.border1} />
          <div className={styles.text}>
            你成为了我们的第
            <span className={styles.textColor}>
              {jobNumber || ''}
            </span>
            个澜宝宝
          </div>
          <div className={styles.border2} />
        </div>
        <div className={styles.border5}>
          <img className={styles.img} src={meetImg} alt=""></img>
        </div>
        <div className={styles.text3}>
          <div>虽然2019年的路上没有留下你的足迹</div>
          <div>但我们相信，在2020年</div>
          <div>作为<span className={styles.textColor}>{position || ''}</span>的你会创造新的奇迹!</div>
        </div>
        <img className={styles.downIcon} src={downIcon} alt='' />
      </div >
    )
  }

  render() {
    const { hiredDate } = this.props
    // if (String(new Date(hiredDate).getFullYear()) === '2020') {
    if (moment(hiredDate).format("YYYY") === '2020') {
      return this.renderMeet2();
    } else {
      return this.renderMeet1();
    }
  }
}

export default connect(({ index }) => index.baseUser)(Meet)